<template>
  <van-tabs
    :border="true"
    :animated="true"
    color="#72C7C6"
    title-active-color="#72C7C6"
    v-model:active="active"
  >
    <van-tab title="全部">
      <p class="p">热门搜索：</p>
      <ul>
        <li v-for="(item, index) in data.list" :key="index" @click="jump">
          {{ item }}
        </li>
      </ul>
    </van-tab>
    <van-tab title="文章"
      ><p class="p">热门搜索：</p>
      <ul>
        <li v-for="(item, index) in data.list" :key="index" @click="jump">
          {{ item }}
        </li>
      </ul></van-tab
    >
    <van-tab title="讨论"
      ><p class="p">热门搜索：</p>
      <ul>
        <li v-for="(item, index) in data.list" :key="index" @click="jump">
          {{ item }}
        </li>
      </ul></van-tab
    >
    <van-tab title="产品"
      ><p class="p">热门搜索：</p>
      <ul>
        <li v-for="(item, index) in data.list" :key="index" @click="jump">
          {{ item }}
        </li>
      </ul></van-tab
    >
    <van-tab title="成分"
      ><p class="p">热门搜索：</p>
      <ul>
        <li v-for="(item, index) in data.list" :key="index" @click="jump">
          {{ item }}
        </li>
      </ul></van-tab
    >
  </van-tabs>
</template>

<script>
import { reactive } from "vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const active = ref(0);
    const data = reactive({
      list: ["视黄醇", "视黄醇", "视黄醇", "视黄醇", "视黄醇"],
    });
    const jump = () => {
      router.push("/searcha");
    };
    return {
      data,
      active,
      jump,
    };
  },
};
</script>

<style lang="less">
.van-tabs__line {
  width: 70px;
  height: 1.5px;
}
.van-tab {
  width: 100px;
}
.p {
  font-size: 16px;
  font-weight: 900;
  margin-top: 20px;
  margin-left: 16px;
  margin-bottom: 10px;
}
ul {
  margin-left: 10px;
  li {
    font-size: 12px;
    border: 1px solid #aaa;
    border-radius: 11px;
    display: inline-block;
    padding: 2px 8px;
    margin: 10px 10px;
  }
}
</style>
